<template>
	<!-- 首页 -->
	<view class="home-content">
		<!-- 导航栏 -->
		<view class="swiper-box">
			<view class="navigation-bar">
				<view class="nav-user" @click="userClick">
					<image class="nav-img" src="../../static/images/icon/user.png" mode="widthFix"></image>
				</view>
				<view class="nav-service" @click="jump(3)">
					<image class="nav-img" src="../../static/images/icon/service.png" mode="widthFix"></image>
				</view>
			</view>
			<!-- 轮播图 -->
			<u-swiper borderRadius="0" height="380" :list="list"></u-swiper>
		</view>
		<!-- all preview -->
		<view class="preview-container">
			<!-- 广播 -->
			<view class="radio-broadcast">
				<image class="notice-img" src="../../static/images/icon/notice.png" mode="widthFix"></image>
				<u-notice-bar class="notice-box" mode="vertical" color="#fff" bg-color="transparent"
					:volume-icon="false" :list="noticeList" />
				<view class="notice-more" @click="gotoNotice">
					<span></span>
					<span></span>
					<span></span>
				</view>
			</view>
			<!-- line-chart -->
			<view class="line-chart-box">
				<view v-for="(item, index) in lineList" :key="index" v-if="index < 3 && item.is_hot"
					@click="showListDataClick(item.currency_id)" style="text-align: center;">
					<view class="line-title-container">
						<text class="medium-font">{{item.currency_name + '/' + item.legal_name}}</text>
						<text :class="item.change > 0? 'fall': 'rise'">{{item.change + '%'}}</text>
					</view>
					<u-count-to style="margin-bottom: 20rpx;" separator="," :duration="10" font-size="38"
						:color="item.change <= 0? '#c64a5d': '#11caa1'" :start-val="item.now_price" :decimals="2"
						:end-val="item.now_price" bold></u-count-to>
					<line-chart :ref="'showListTop' + item.id" :canvasId="'show_list_id_s_' + item.id"
						:dataAs="item.chartData" />
				</view>
			</view>
			<!-- 操作 -->
			<view class="preview-handle">
				<view class="preview-handle-box" v-for="item in handleList" :key="item.id"
					@click="previewHandle(item.id)">
					<view class="preview-handle-image-box">
						<image class="preview-handle-image" :src="'../../static/images/icon/' + item.icon +'.png'"
							mode="widthFix"></image>
					</view>
					<text>{{item.title}}</text>
				</view>
			</view>
		</view>
		<!-- Buy Crypto -->
		<view class="buy-crypto">
			<view class="left-box">
				<text class="medium-font main-color">{{'Buy Crypto'}}</text>
				<text>{{'Buy and sell digital assets'}}</text>
			</view>
			<image style="width: 160rpx;" src="../../static/images/icon/ph.png" mode="widthFix"></image>
			<view class="right-box" @click="previewHandle(0)">
				{{'GO'}}
			</view>
		</view>
		<!-- 展示列表 -->
		<view class="show-list">
			<tabs :list="showList" :fontSize="32" @click="showListClick"></tabs>
			<view class="show-list-data" v-for="item in showListData" :key="item.id"
				@click="showListDataClick(item.currency_id)">
				<view class="left-box">
					<text>{{item.currency_name}}</text><text>{{'/' + item.legal_name}}</text>
				</view>
				<line-chart :ref="'showListBottom' + item.id" :canvasId="'show_list_id_' + item.id"
					:dataAs="item.chartData" />
				<view class="right-box">
					<text style="color: #fff; font-size: 32rpx;margin-right: 4rpx;">{{'$'}}</text>
					<u-count-to font-size="32" color="#fff" :duration="10" :start-val="item.now_price" separator=","
						:decimals="2" :end-val="item.now_price" bold></u-count-to>
					<text :class="item.change <= 0? 'fall': 'rise'">{{item.change + '%'}}</text>
				</view>
			</view>
		</view>
		<!-- 个人中心侧边栏 -->
		<u-popup v-model="personalShow" width="620">
			<view class="personal-box list-bg">
				<div class="personal-information view-bg">
					<view class="avatar-first">
						<view class="avatar-second">
							<!-- <img class="avatar-three" :src="avatar? avatar: src" alt=""> -->
							<u-avatar class="avatar-three" :src="avatar? avatar: src" size="126"></u-avatar>
						</view>
					</view>

					<view class="information">
						<view>
							<text class="white-text">{{name || nickname}}</text>
							<text>ID:{{phone}}</text>
						</view>
					</view>

					<view class="personal-card card main-bg" @click="jump(7)">
						<view class="left-view">
							<text>{{i18n.home.elementaryCertification}}</text>
							<text>unverified</text>
						</view>
						<image style="width: 132rpx;" src="../../static/images/icon/authentication.png" mode="widthFix">
						</image>
					</view>
				</div>
				<view class="personal-container">
					<view class="card resh" @click="jump(8)">
						<view class="left-view">
							<text>{{i18n.home.seniorCertification}}</text>
							<text>unverified</text>
						</view>
						<image style="width: 132rpx;" src="../../static/images/icon/authentication.png" mode="widthFix">
						</image>
					</view>
				</view>
				<view class="personal-list" v-for="(item, index) in personalList" :key="index" @click="jump(index)">
					<image class="personal-image" :src="'../../static/images/ui/' + item.icon + '.png'"
						mode="heightFix"></image>
					<text>{{item.name}}</text>
					<u-icon name="arrow-right" color="rgba(255, 255, 255, .4)" size="24"></u-icon>
				</view>
			</view>
		</u-popup>
		<tips-popup ref="tips"></tips-popup>
		<custom-loading text="" mask="true" click="true" ref="loading"></custom-loading>
	</view>
</template>

<script>
	import LineChart from '@/components/stan-ucharts/LineChart.vue'
	import TipsPopup from '@/components/TipsPopup/index.vue'
	import CustomLoading from '@/components/Loadidng/index.vue'
	import Tabs from '@/components/Tabs/index.vue'
	import {
		getToken
	} from '@/utils/auth.js'
	import {
		Toast
	} from '@/utils/util.js'
	import {
		newsList,
		quotation_new
	} from '@/api/index.js'
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		components: {
			LineChart,
			TipsPopup,
			Tabs,
			CustomLoading
		},
		computed: {
			...mapGetters(['phone', 'nickname', 'avatar', 'name', 'is_open_tbi', 'is_open_cbiremarks', 'is_open_cbi',
				'is_open_tbiremarks', 'review_status', 'is_open_realdh',
				'is_open_realcbi', 'is_open_grealcbi', 'is_open_grealtbi', 'is_open_realtbi', 'is_open_grealdh'
			]),
			i18n() {
				return this.$t('message');
			},
			showList() {
				return [{
						title: this.$t('message').home.performer,
						value: 'quotation'
					},
					{
						title: this.$t('message').home.dropList,
						value: 'quotationlow'
					},
					{
						title: this.$t('message').home.VOLLesers,
						value: 'quotationdeal'
					}
				]
			},
			handleList() {
				let arry = [{
						icon: 'charge_money',
						title: this.$t('message').common.charge,
						id: 0
					}, {
						icon: 'withdraw_money',
						title: this.$t('message').common.mention,
						id: 1
					},
					{
						icon: 'exchange',
						title: this.$t('message').common.exchange,
						id: 2
					},
					{
						icon: 'help',
						title: this.$t('message').common.help,
						id: 3
					},
				];
				return arry;
			},
			personalList() {
				return [{
						name: this.$t('message').home.record,
						icon: 'record'
					},
					{
						name: this.$t('message').home.wallet,
						icon: 'wallet'
					},
					{
						name: this.$t('message').home.share,
						icon: 'share'
					},
					{
						name: this.$t('message').home.service,
						icon: 'service'
					},
					{
						name: this.$t('message').home.help,
						icon: 'help'
					},
					{
						name: this.$t('message').home.platform,
						icon: 'us'
					},
					{
						name: this.$t('message').home.set,
						icon: 'set'
					},
				]
			}
		},
		data() {
			return {
				list: [{
						image: '../../static/images/ui/banner_1.png'
					},
					{
						image: '../../static/images/ui/banner_4.jpg'
					}
				],
				noticeList: [],
				lineList: [{
						legal_name: 'USDT',
						currency_name: 'BTH',
						id: 3,
						now_price: 0,
						is_hot: 1,
						change: '0.00',
						chartData: {
							categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
							series: [{
								name: '成交量A',
								color: '#11caa1',
								data: [35, 20, 25, 37, 4, 20],
							}]
						},
					},
					{
						legal_name: 'USDT',
						currency_name: 'BTH',
						id: 4,
						now_price: 0,
						is_hot: 1,
						change: '0.00',
						chartData: {
							categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
							series: [{
								name: '成交量A',
								color: '#11caa1',
								data: [35, 20, 25, 37, 4, 20],
							}]
						},
					},
					{
						legal_name: 'USDT',
						currency_name: 'BTH',
						id: 7,
						now_price: 0,
						is_hot: 1,
						change: '0.00',
						chartData: {
							categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
							series: [{
								name: '成交量A',
								color: '#11caa1',
								data: [35, 20, 25, 37, 4, 20],
							}]
						},
					},
				],
				showListData: [],
				personalShow: false,
				src: '../../static/images/ui/1.jpg',
				tabsIndex: 'quotation',
				time: null,
				isRequest: true,
				usdtList: {}
			}
		},
		onShow() {
			uni.setTabBarItem({
				index: 0,
				text: this.i18n.tabBar.home
			});
			uni.setTabBarItem({
				index: 1,
				text: this.i18n.tabBar.period
			});
			uni.setTabBarItem({
				index: 2,
				text: this.i18n.tabBar.point
			});
			uni.setTabBarItem({
				index: 3,
				text: this.i18n.tabBar.balances
			});
		},
		onLoad() {
			// 导航栏多语言
			uni.setNavigationBarTitle({
				title: this.i18n.tabBar.home
			});
		},
		onReady() {
			this.$refs.loading.open();
		},
		async mounted() {
			await this.getCurrency()
			await this.getNewsList();
			clearInterval(this.time)
			this.time = null;
			this.setCurrency()
		},
		activated() {
			this.isRequest = true;
			this.setCurrency();
		},
		deactivated() {
			this.isRequest = false;
			clearInterval(this.time)
			this.time = null;
		},
		methods: {
			...mapActions({
				getCurrencyList: 'currency/getCurrencyList'
			}),
			previewHandle(id) {
				switch (id) {
					case 0:
						if (!getToken()) return this.$refs.tips.open('confirm', this.i18n.common.loginTips);
						if (!this.is_open_cbi) return Toast(this.is_open_cbiremarks);
						if (this.is_open_grealcbi && this.review_status !== 4) return Toast(this.i18n.common.seniorAuth);
						if (this.is_open_realcbi && this.review_status === 0) return Toast(this.i18n.common.primaryAuth);
						uni.navigateTo({
							url: '/pages/index/passageway'
						})
						break;
					case 1:
						if (!getToken()) return this.$refs.tips.open('confirm', this.i18n.common.loginTips);
						if (!this.is_open_tbi) return Toast(this.is_open_tbiremarks);
						if (this.is_open_grealtbi && this.review_status !== 4) return Toast(this.i18n.common.seniorAuth);
						if (this.is_open_realtbi && this.review_status === 0) return Toast(this.i18n.common.primaryAuth);
						uni.navigateTo({
							url: '/pages/mention/index'
						})
						break;
					case 2:
						if (!getToken()) return this.$refs.tips.open('confirm', this.i18n.common.loginTips);
						if (this.is_open_grealdh && this.review_status !== 4) return Toast(this.i18n.common.seniorAuth);
						if (this.is_open_realdh && this.review_status === 0) return Toast(this.i18n.common.primaryAuth);
						uni.navigateTo({
							url: '/pages/exchange/index'
						})
						break;
					case 3:
						uni.navigateTo({
							url: '/pages/help/index'
						})
						break;
				}
			},
			gotoNotice() {
				uni.navigateTo({
					url: '/pages/notice/index'
				})
			},
			jump(index) {
				let url = '';
				switch (index) {
					case 0:
						url = '/pages/bill/index'
						break;
					case 1:
						url = '/pages/wallet/index'
						break;
					case 2:
						url = '/pages/index/share'
						break;
					case 3:
						url = '/pages/set/service'
						break;
					case 4:
						url = '/pages/help/index'
						break;
					case 5:
						url = '/pages/index/us'
						break;
					case 6:
						url = '/pages/set/index'
						break;
					case 7:
						url = '/pages/authentication/primary'
						break;
					case 8:
						url = '/pages/authentication/senior'
						break;
				}
				uni.navigateTo({
					url: url
				});
				this.personalShow = false;
			},
			userClick() {
				if (getToken()) return this.personalShow = true;
				this.$refs.tips.open('confirm', this.i18n.common.loginTips);
			},
			// 获取公告
			async getNewsList() {
				let {
					error,
					res
				} = await newsList({
					c_id: 4
				});
				if (error) return;
				let data = res.list || [];
				if (!data.length) return;

				for (let i in data) {
					this.noticeList.push(data[i].title)
				}
			},
			showListClick(val) {
				this.tabsIndex = val;
				this.showListData = this.usdtList[this.tabsIndex];
				let _this = this;
				setTimeout(() => {
					for (let j in _this.showListData) {
						_this.handleLine('showListBottom' + _this.showListData[j].id, _this.showListData[j]
							.chartData);
					}
				}, 0)
			},
			async getCurrency() {
				this.getCurrencyList().then(res => {
					let arry = res || [];
					for (let i in arry) {
						if (arry[i].name === 'USDT') {
							for (let o in arry[i].quotation) {
								arry[i].quotation[o].chartData = {
									categories: [],
									series: [{
										name: '成交量A',
										color: arry[i].quotation[o].change <= 0 ? '#c64a5d' :
											'#11caa1',
										data: [],
									}]
								}
								if (!arry[i].quotation[o].kxline.length) continue;
								for (let k in arry[i].quotation[o].kxline) {
									let categories = "201" + k;
									arry[i].quotation[o].chartData.categories.push(categories);
									arry[i].quotation[o].chartData.series[0].data.push(Number(arry[i]
										.quotation[o].kxline[k].end_price));
								}
							}

							for (let o in arry[i].quotationdeal) {
								arry[i].quotationdeal[o].chartData = {
									categories: [],
									series: [{
										name: '成交量A',
										color: arry[i].quotation[o].change <= 0 ? '#c64a5d' :
											'#11caa1',
										data: [],
									}]
								}
								if (!arry[i].quotationdeal[o].kxline.length) continue;
								for (let k in arry[i].quotationdeal[o].kxline) {
									let categories = "201" + k;
									arry[i].quotationdeal[o].chartData.categories.push(categories);
									arry[i].quotationdeal[o].chartData.series[0].data.push(Number(arry[i]
										.quotationdeal[o].kxline[k].end_price));
								}
							}

							for (let o in arry[i].quotationlow) {
								arry[i].quotationlow[o].chartData = {
									categories: [],
									series: [{
										name: '成交量A',
										color: arry[i].quotationlow[o].change <= 0 ? '#c64a5d' :
											'#11caa1',
										data: [],
									}]
								}
								if (!arry[i].quotationlow[o].kxline.length) continue;
								for (let k in arry[i].quotationlow[o].kxline) {
									let categories = "201" + k;
									arry[i].quotationlow[o].chartData.categories.push(categories);
									arry[i].quotationlow[o].chartData.series[0].data.push(Number(arry[i]
										.quotationlow[o].kxline[k].end_price));
								}
							}

							this.usdtList = arry[i];

						}
					}
					// console.log(arry)
					this.showListData = this.usdtList[this.tabsIndex];
					this.lineList = this.usdtList.quotation;
					let _this = this;
					setTimeout(() => {
						for (let j in _this.showListData) {
							_this.handleLine('showListBottom' + _this.showListData[j].id, _this
								.showListData[j].chartData);
						}
					}, 0)
					setTimeout(() => {
						for (let z in _this.lineList) {
							if (Number(z > 2)) break;
							_this.handleLine('showListTop' + _this.lineList[z].id, _this.lineList[z]
								.chartData);
						}
					}, 0)
					_this.$refs.loading.close();
				})
			},
			setCurrency() {
				let _this = this;
				clearInterval(_this.time)
				_this.time = null;
				if (!_this.isRequest) return;
				_this.time = setInterval(() => {
					_this.getCurrency();
					_this.setCurrency();
				}, 10000)
			},

			showListDataClick(id) {
				uni.switchTab({
					url: '/pages/period/index'
				})
				uni.setStorageSync('periodId', id);
			},

			handleLine(name, data) {
				this.$refs[name][0].upData(data);
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss'
</style>
